<!DOCTYPE html>
<!--
fullpage.js
实验页面
and
语义化HTML，分享PTT
-->
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>语义化的HTML</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
    <!--fullpage.css-->
    <link href="css/jquery.fullPage.css" rel="stylesheet" type="text/css" rel="external nofollow"/>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <link href="css/material.css" rel="stylesheet" type="text/css"/>
    <link href="css/main.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<!--模版-->
<!--    <div id="fullpage">
      <div class="section " id="">
        <h1>fullPage.js</h1>
      </div>
      <div class="section" id="">
        <div class="slide">
          <div class="intro">
            <h1>Create Sliders</h1>
          </div>
        </div>
        <div class="slide">
          <div class="intro">
            <h1>Create Sliders</h1>
          </div>
        </div>
      </div>
    </div>-->
<!--END 模版-->
<div id="fullpage">
<!--1：封面-->
<div class="section">
    <div class="container">
        <div class="col-sm-4">
            <a class="thumbnail panel-paper">
                <img src="images/html5-layout.jpg" alt="" class="img-responsive "/>
            </a>

        </div>
        <div class=" col-sm-8">


            <h1 style="color:#ffffff" class="text-shadow">
                <span class="glyphicon glyphicon-comment"></span>
                <
                <strong>语义化</strong>&nbsp;
                <span style="color:#398439">class=</span>
                <span style="color:#993366">"</span>
                <span style="color:#398439">letYouUnderstand</span>
                <span style="color:#993366">"</span>
                />
                <br/>

              <span style="font-size: 30px">
                的 HTML 前端开发
              </span>
            </h1>

            <br/>

            <h3 style="color:#ddd">
                相关职业：
                <small style="color:#fff">
                    前端开发攻城狮子；网页射鸡湿；后端开发橙续猿；
                </small>
            </h3>
            分享者：詹伟
            <br/><br/><br/><br/><br/>
        </div>
    </div>
</div>

<!--2：什么是语义化HTML-->
<div class="section" id="">
    <div class="slide">
        <div class="intro">
            <div class="container text-center">
                <h1 class="text-shadow">
                    什么是&nbsp;
                    <strong>语义化</strong>
                    ？
                </h1>
     <h1>
                    What Is Semantic <br/>
                    <small class="text-black">
                        元素 + 属性 + 属性值 (+ 文档结构)
                    </small>
                </h1>
            </div>
        </div>
    </div>
    <div class="slide">
        <div class="intro">
            <div class="container">
                <h1>
                    ╭(′▽`)╭(′▽`)╯
                    让机器可以读懂内容,
                    以及让别人知道你在干嘛。
                </h1>
            </div>
        </div>
    </div>
    <div class="slide">
        <div class="intro">
            <div class="container">
                <h1>
                    赋予你的段落或者你的代码以某种意义，<br/>
                    让机器和人能够简单快速理解其含义，并做出各种处理。
                </h1>
            </div>
        </div>
    </div>
</div>
<!--3：为什么要做到语义化AND语义化的好处-->
<div class="section">
    <div class="slide">
        <div class="intro">
            <div class="container">
                <h1>
                    WHY?◔ ‸◔？<br/>
                    为什么要做到语义化？
                </h1>
            </div>
        </div>
    </div>
    <!--语义化历史-->
    <div class="slide">
        <div class="intro">
            <div class="container">
                <h1>HTML语义化的历史</h1>

                <div class="row">
                    <div class="col-sm-4">
                        <a class="thumbnail panel-paper ">
                            <img src="images/2-2.png" alt=""/>
                        </a>
                    </div>
                    <div class="col-sm-8">
                        <ol class="list-text">
                            <li>
                                文本传输，人类可读，机器不可读。w(ﾟДﾟ)w
                            </li>
                            <li>
                                HTML诞生，可记录一些文本之外的东西。但不是为了计算机可读而优化。计算机解析困难.Σ( ° △ °|||)︴
                            </li>
                            <li>
                                XHTML诞生，人和计算机都可读的协议。(๑•̀ㅂ•́)و✧
                            </li>
                            <li>
                                人类理解文本字面以外更重要的是把这些概念抽出来理解，人类需要知道文档的结构是什么。
                            </li>
                            <li>
                                后来大家发现光有文档没有索引不行，所以搜索引擎越来越重要。解析文档需要机器人，机器人读网页的权利被越来越多的重视起来♪(^∇^*)
                            </li>
                        </ol>
                    </div>
                </div>


            </div>
        </div>
    </div>
    <!--这样做的好处-->
    <div class="slide">
        <div class="intro">
            <div class="container">
                <h1 class="text-shadow">
                    这样做的好处：
                </h1>
                <ol class="list-text">
                    <li>
                        SEO优化，有利于搜索引擎的爬虫机器人收录。
                    </li>
                    <li>
                        加载速度优化。
                    </li>
                    <li>
                        代码结构清晰，可维护性高，多人协作时方便交流。
                    </li>
                </ol>
            </div>
        </div>
    </div>
    <!--不这样做的坏处-->
    <div class="slide">
        <div class="intro">
            <div class="container">
                <h1 class="text-shadow">
                    不这样做的坏处：
                </h1>
                <ol class="list-text">
                    <li>
                        搜索引擎无法或者难以收录。
                    </li>
                    <li>
                        网页加载速度被限制。
                    </li>
                    <li>
                        代码结构紊乱，难以进行维护和二次开发。
                    </li>
                </ol>
            </div>
        </div>
    </div>


</div>

<!--常用语义化html标签-->
<div class="section">
    <div class="slide">
        <div class="intro">
            <div class="container">
                <h1 class="text-shadow  text-center">
                    <strong>
                        常用语义化的HTML标签：
                    </strong>
                </h1>
            </div>
        </div>
    </div>

    <!--布局标签（div ;span;header;footer;article;aside;nav）-->
    <div class="slide">
        <div class="intro">
            <div class="container">
                <div class="row">
                    <div class="col-sm-8">
                        <a class="thumbnail">
                            <img src="images/html5-layout.jpg" alt=""/>
                        </a>
                    </div>
                    <div class="col-sm-4">
                        <h1 class="text-shadow">
                            布局标签<br/>
                            <small>用于确定页面结构布局的标签</small>
                        </h1>
                        <code class="html" style="font-size: 40px">
                            <span>&lt;div&gt;</span>
                            <span>&lt;span&gt;</span>
                            <span>&lt;header&gt;</span>
                            <span>&lt;nav&gt;</span>
                            <span>&lt;article&gt;</span>
                            <span>&lt;aside&gt;</span>
                            <span>&lt;footer&gt;</span>
                        </code>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <!--table标签-->
    <div class="slide">
        <div class="intro">
            <div class="container">
                <h1 class="text-shadow  text-center">
                    &lt;table&gt;标签<br/>
                    <small>用于展示数据（数组）的标签
                        <a href="http://www.w3cschool.cc/tags/tag-table.html" class="btn  btn-danger"><span
                            class="color_h1">&lt;table&gt;</span></a>
                    </small>
                </h1>


            </div>
        </div>
    </div>


    <!--文本排版类标签-->
    <div class="slide">
        <div class="intro">
            <div class="container">
                <h1 class="text-shadow text-center">
                    文字排版类标签<sup>标签</sup>

                    <br/>
                    <small>
                        <a href="tag-hn.html" class="btn  btn-danger">&lt;h1&gt; to &lt;h6&gt;</a>
                        <a href="tag-p.html" class="btn  btn-danger">&lt;p&gt;</a>
                        <a href="tag-br.html" class="btn  btn-danger">&lt;br&gt;</a>
                        <a href="tag-hr.html" class="btn  btn-danger">&lt;hr&gt;</a>
                        <a href="tag-b.html" class="btn  btn-danger">&lt;b&gt;</a>
                        <a href="tag-blockquote.html" class="btn  btn-danger">&lt;blockquote&gt;</a>
                        <a href="tag-i.html" class="btn  btn-danger">&lt;i&gt;</a>
                        <a href="tag-small.html" class="btn  btn-danger">&lt;small&gt;</a>
                        <a href="tag-strong.html" class="btn  btn-danger">&lt;strong&gt;</a>
                        <a href="tag-sub.html" class="btn  btn-danger">&lt;sub&gt;</a>
                        <a href="tag-sup.html" class="btn  btn-danger">&lt;sup&gt;</a>
                    </small>
                </h1>
            </div>
        </div>
    </div>


    <!--ol和ul-->
    <div class="slide">
        <div class="intro">
            <div class="container">
                <h1 class="text-shadow text-center">
                    <a href="tag-ul.html" class="btn lg btn-danger"><h1>&lt;ul&gt;</h1></a>和<a href="tag-ol.html" class="btn lg btn-danger"><h1>&lt;ol&gt;</h1></a>
                </h1>
            </div>
        </div>
    </div>


</div>
<!--7：封底-->
<div class="section">
<div class="container">
    <h1 class="text-center text-center text-black">
    感谢聆听！<br/>
       <small>
           为毛我的PPT这么不一样？┗|*｀0′*|┛fullPage.js
       </small>
    </h1>
</div>
</div>
<div class="section">
    <div class="container">
        <h1 class="text-shadow text-center">
            B标签和STRONG标签的区别<br/>
        </h1>
        <p style="font-size: 30px;">
            这是一段正常的文字<b>这是B标签的文字</b><strong>这是STRONG的</strong>这是一段正常的文字
        </p>
    </div>
</div>
</div>


<!--END 页面-->

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery-ui.min.js" type="text/javascript"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<!--fullpage.js引入-->
<script src="js/jquery.fullPage.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $('#fullpage').fullpage({
            sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#4444444', 'whitesmoke', '#ccddff'],
            anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', '5thpage', '6thpage', 'lastPage']
        });

    });
</script>
</body>
</html>
